Forms

An HTML form contains interactive controls to submit information to a web server.

InputInput › DefaultInput › With icon to the leftInput › With icon to the rightInput › With icon to the left and rightInput › RequiredInput › ErrorInput › Error with iconInput › DisabledInput › Read onlyInput › With fixed textInput › Read only With fixed textInputdev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-01">Input Label</label>
  <div class="slds-form-element__control">
    <input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
  </div>
</div>

You can style the HTML <input> element to align with the Salesforce brand by using the .slds-input class on the <input> element.

The <input> element includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Accessibility

Inputs with errors should have aria-describedby to insure that the associated field level error message is read by assistive technology. If the error message has an id="my-error-message", then the input should have aria-describedby="my-error-message".

TextareaTextarea › DefaultTextarea › RequiredTextarea › ErrorTextarea › DisabledTextarea › Read onlyTextareadev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-form-element__label" for="textarea-input-01">Textarea Label</label>
  <div class="slds-form-element__control">
    <textarea id="textarea-input-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
  </div>
</div>

You can style the HTML <textarea> element to align with the Salesforce brand by using the class .slds-textarea on the <textarea> element.

RadioRadio › DefaultRadio › RequiredRadio › ErrorRadio › DisabledRadiodev ready

Preview

Code

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
  <div class="slds-form-element__control">
    <label class="slds-radio">
      <input type="radio" name="options" />
      <span class="slds-radio--faux"></span>
      <span class="slds-form-element__label">Radio Label One</span>
    </label>
    <label class="slds-radio">
      <input type="radio" name="options" />
      <span class="slds-radio--faux"></span>
      <span class="slds-form-element__label">Radio Label Two</span>
    </label>
  </div>
</fieldset>

Radio buttons are shown in a group of two or more. The user can only select one radio button at a time. You should use the same name attribute on all radio buttons in the group. This ensures that if there is more than one group in the form, each one stays associated with its own group.

The ability to style radio buttons with CSS varies across browsers. To ensure that radio buttons look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

Accessibility

Groups of radio buttons should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of radio buttons. The fieldset is placed around the whole group and the legend contains the question.

Custom radio buttons are created by applying the .slds-radio class to a <label> element. To remain accessible to all user agents, place an <input> with type="radio" inside the <label> element. The <input> is then visually hidden, and the styling is placed on a span with the .slds-radio--faux class. The styling of the span changes based on whether the radio button is selected or focused by using a pseudo-element. A second span with .slds-form-element__label contains the label text.

When a radio group is required, the <fieldset> should receive the class .{{.cssPrefix}}is-required. The <legend> should then get <abbr class="required" title="required">*</abbr> added to the DOM for visual indication that the radio group is required.

Radio Group AlternateRadio Group Alternate › DefaultRadio Group Alternate › Checkbox group has errorRadio Group Alternate › Disabled checkbox groupRadio Group Alternatedev ready

Preview

Code

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-radio--button-group">
      <label class="slds-button slds-radio--button" for="monday">
        <input name="radio" type="radio" id="monday" />
        <span class="slds-radio--faux">Mon</span>
      </label>
      <label class="slds-button slds-radio--button" for="tuesday">
        <input name="radio" type="radio" id="tuesday" />
        <span class="slds-radio--faux">Tue</span>
      </label>
      <label class="slds-button slds-radio--button" for="wednesday">
        <input name="radio" type="radio" id="wednesday" />
        <span class="slds-radio--faux">Wed</span>
      </label>
      <label class="slds-button slds-radio--button" for="thursday">
        <input name="radio" type="radio" id="thursday" />
        <span class="slds-radio--faux">Thu</span>
      </label>
      <label class="slds-button slds-radio--button" for="friday">
        <input name="radio" type="radio" id="friday" />
        <span class="slds-radio--faux">Fri</span>
      </label>
    </div>
  </div>
</fieldset>

CheckboxCheckbox › DefaultCheckbox › RequiredCheckbox › ErrorCheckbox › DisabledCheckbox › GroupCheckbox › Group RequiredCheckbox › Group with errorCheckbox › Group DisabledCheckboxdev ready

Preview

Code

<div class="slds-form-element">
  <div class="slds-form-element__control">
    <label class="slds-checkbox">
      <input type="checkbox" name="options" id="checkbox-01" />
      <span class="slds-checkbox--faux"></span>
      <span class="slds-form-element__label">Checkbox Label</span>
    </label>
  </div>
</div>

The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

Accessibility

Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question.

Custom checkboxes are created by applying the .slds-checkbox class to a <label> element. To remain accessible to all user agents, place <input> with type="checkbox" inside the <label> element. The <input> is then visually hidden, and the styling is placed on a span with the .slds-checkbox--faux class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with .slds-form-element__label contains the label text.

When a single checkbox is required, <div class="slds-checkbox"> should get <abbr class="required" title="required">*</abbr> added to the DOM, directly before the <input type="checkbox" /> for visual indication that the checkbox is required.

When a checkbox group is required, the <fieldset> should receive the class .{{.cssPrefix}}is-required. The <legend> should then get <abbr class="required" title="required">*</abbr> added to the DOM for visual indication that the checkbox group is required.

Checkbox ToggleCheckbox Toggle › DefaultCheckbox Toggle › CheckedCheckbox Toggle › DisabledCheckbox Toggle › GroupedCheckbox Toggledev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-checkbox--toggle slds-grid slds-grid--vertical-align-center">
    <span class="slds-form-element__label slds-m-bottom--none">Toggle Label</span>
    <input name="checkbox" type="checkbox" />
    <span class="slds-checkbox--faux" data-check-on="On" data-check-off="Off"></span>
  </label>
</div>

Checkbox AlternateCheckbox Alternate › DefaultCheckbox Alternate › Checkbox group has errorCheckbox Alternate › Disabled checkbox groupCheckbox Alternatedev ready

Preview

Code

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-checkbox--button-group">
      <label class="slds-button slds-checkbox--button" for="monday">
        <input name="checkbox" type="checkbox" id="monday" />
        <span class="slds-checkbox--faux">Mon</span>
      </label>
      <label class="slds-button slds-checkbox--button" for="tuesday">
        <input name="checkbox" type="checkbox" id="tuesday" />
        <span class="slds-checkbox--faux">Tue</span>
      </label>
      <label class="slds-button slds-checkbox--button" for="wednesday">
        <input name="checkbox" type="checkbox" id="wednesday" />
        <span class="slds-checkbox--faux">Wed</span>
      </label>
      <label class="slds-button slds-checkbox--button" for="thursday">
        <input name="checkbox" type="checkbox" id="thursday" />
        <span class="slds-checkbox--faux">Thu</span>
      </label>
      <label class="slds-button slds-checkbox--button" for="friday">
        <input name="checkbox" type="checkbox" id="friday" />
        <span class="slds-checkbox--faux">Fri</span>
      </label>
    </div>
  </div>
</fieldset>

SelectSelect › DefaultSelect › RequiredSelect › ErrorSelect › DisabledSelect › Multiple SelectionSelectdev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-form-element__label" for="select-01">Select Label</label>
  <div class="slds-form-element__control">
    <div class="slds-select_container">
      <select id="select-01" class="slds-select">
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
      </select>
    </div>
  </div>
</div>

The HTML <select> element presents a menu of options. The options within the menu are represented by <option> elements that you can group with <optgroup> elements. You can pre-select options for the user.

For a multiple options selections, adding the attribute multiple to the <select> will enable this functionality. Note, if you need multiple option selections, you will need to remove the <div class="slds-select_container"> from the DOM, otherwise you'll get display issues.

If you need more advanced styling, consider using a Picklist.

Multi SelectMulti SelectprototypeNot Compatible with S1 Mobile

Preview

Code

<div class="slds-picklist--draggable slds-grid">
  <div class="slds-form-element">
    <span class="slds-form-element__label" aria-label="select-1">First Category</span>
    <div class="slds-picklist picklist--multi">
      <ul class="slds-picklist__options slds-picklist__options--multi">
        <li draggable="true" id="po-8-0" class="slds-picklist__item" aria-selected="false" tabindex="0" role="option">
          <span class="slds-truncate">Option One</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="slds-grid slds-grid--vertical">
    <button class="slds-button slds-button--icon-container">
      <svg aria-hidden="true" class="slds-button__icon">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>
      </svg>
      <span class="slds-assistive-text">Arrow left</span>
    </button>
    <button class="slds-button slds-button--icon-container">
      <svg aria-hidden="true" class="slds-button__icon">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right"></use>
      </svg>
      <span class="slds-assistive-text">Arrow right</span>
    </button>
  </div>
  <div class="slds-form-element">
    <span class="slds-form-element__label" aria-label="select-1">First Category</span>
    <div class="slds-picklist picklist--multi">
      <ul class="slds-picklist__options slds-picklist__options--multi"></ul>
    </div>
  </div>
  <div class="slds-grid slds-grid--vertical">
    <button class="slds-button slds-button--icon-container">
      <svg aria-hidden="true" class="slds-button__icon">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#up"></use>
      </svg>
      <span class="slds-assistive-text">Arrow up</span>
    </button>
    <button class="slds-button slds-button--icon-container">
      <svg aria-hidden="true" class="slds-button__icon">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
      </svg>
      <span class="slds-assistive-text">Arrow down</span>
    </button>
  </div>
</div>

Multi Select picklists that allow for draggable options between picklists. Picklist options can also be re-ordered.

Horizontal FormHorizontal Formdev ready

Preview

Code

<div class="slds-form--horizontal">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="inputSample2">Text Input</label>
    <div class="slds-form-element__control">
      <input id="inputSample2" class="slds-input" type="text" placeholder="Placeholder Text" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="textareaSample2">Textarea Label</label>
    <div class="slds-form-element__control">
      <textarea id="textareaSample2" class="slds-textarea"></textarea>
    </div>
  </div>
  <fieldset class="slds-form-element is-required">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="opportunities-ownership">
        <input name="default" type="checkbox" id="opportunities-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All opportunities owned by you</span>
      </label>
      <label class="slds-checkbox" for="contact-ownership">
        <input name="default" type="checkbox" id="contact-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All contacts in the account owned by you</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="slds-form-element is-required">
    <legend class="slds-form-element__legend slds-form-element__label">Radio Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-radio" for="lead">
        <input type="radio" name="options" id="lead" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Lead Generation</span>
      </label>
      <label class="slds-radio" for="education">
        <input type="radio" name="options" id="education" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Education Leads</span>
      </label>
    </div>
  </fieldset>
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="agree">
        <input name="default" type="checkbox" id="agree" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">I agree to the Terms &amp; Service</span>
      </label>
    </div>
  </div>
</div>

To horizontally align a <label> and <input>, use the .slds-form--horizontal class on the wrapper around the form. A .slds-form-element__label takes up 33% of the width, and the .slds-form-element__control uses the remaining 66%.

Stacked FormStacked Formdev ready

Preview

Code

<div class="slds-form--stacked">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="inputSample2">Text Input</label>
    <div class="slds-form-element__control">
      <input id="inputSample2" class="slds-input" type="text" placeholder="Placeholder Text" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="textareaSample2">Textarea Label</label>
    <div class="slds-form-element__control">
      <textarea id="textareaSample2" class="slds-textarea"></textarea>
    </div>
  </div>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="opportunities-ownership">
        <input name="default" type="checkbox" id="opportunities-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All opportunities owned by you</span>
      </label>
      <label class="slds-checkbox" for="contact-ownership">
        <input name="default" type="checkbox" id="contact-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All contacts in the account owned by you</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-radio" for="lead">
        <input type="radio" name="options" id="lead" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Lead Generation</span>
      </label>
      <label class="slds-radio" for="education">
        <input type="radio" name="options" id="education" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Education Leads</span>
      </label>
    </div>
  </fieldset>
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="agree">
        <input name="default" type="checkbox" id="agree" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">I agree to the Terms &amp; Service</span>
      </label>
    </div>
  </div>
</div>

To vertically stack <label> and <input> pairs, place .slds-form--stacked on the wrapper of the form for optimal spacing.

Inline FormInline Formdev ready

Preview

Code

<form class="slds-form--inline">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="name">Name</label>
    <div class="slds-form-element__control">
      <input id="name" class="slds-input" type="text" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="email">Email</label>
    <div class="slds-form-element__control">
      <input id="email" class="slds-input" type="text" />
    </div>
  </div>
  <div class="slds-form-element">
    <button class="slds-button slds-button--brand" type="button">Send</button>
  </div>
</form>

To horizontally align form elements on the same axis, use .slds-form--inline on the form wrapper.

Compound FormCompound Formdev ready

Preview

Code

<fieldset class="slds-form--compound">
  <legend class="slds-form-element__label">Location</legend>
  <div class="form-element__group">
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-01">Latitude</label>
        <input id="input-01" class="slds-input" type="text" />
      </div>
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-02">Longitude</label>
        <input id="input-02" class="slds-input" type="text" />
      </div>
    </div>
  </div>
</fieldset>
<fieldset class="slds-form--compound">
  <legend class="slds-form-element__label">Address</legend>
  <div class="form-element__group">
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-1">
        <label class="slds-form-element__label" for="input-03">Street</label>
        <input id="input-03" class="slds-input" type="text" />
      </div>
    </div>
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-04">City</label>
        <input id="input-04" class="slds-input" type="text" />
      </div>
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-05">State</label>
        <input id="input-05" class="slds-input" type="text" />
      </div>
    </div>
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-06">ZIP Code</label>
        <input id="input-06" class="slds-input" type="text" />
      </div>
    </div>
  </div>
</fieldset>

A compound form consists of form groups that are labeled by the <legend> of a <fieldset>. The <fieldset> requires the .slds-form--compound class. By default, the form groups within the fieldset are vertically stacked. To horizontally align the label (for example, <legend class="slds-form-element__label">), use the .slds-form--compound--horizontal class.

A form group needs a containing <div> with the .slds-form-element__group class applied to it. Within .slds-form-element__group you can have multiple rows of compound fields by wrapping a row in a <div> with the .slds-form-element__row class.

Pay close attention to the markup of a form control within a compound field, because it differs slightly from other form elements. A form control can receive a sizing helper class, for example: .slds-size--1-of-3, to modify the width of the input field. See Sizing utilities for more sizing options.

Field Level HelpField Level Helpdev ready

Preview

Code

<div class="slds-form-element">
  <div class="slds-form-element__label">
    <label class="slds-align-middle" for="form-help">Text Label</label>
  </div>
  <div class="slds-form-element__icon">
    <a href="javascript:void(0);">
      <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
      </svg>
      <span class="slds-assistive-text">Help</span>
    </a>
  </div>
  <div class="slds-form-element__control">
    <input id="form-help" class="slds-input" type="text" placeholder="Field Level Help" aria-describedby="help" />
  </div>
</div>
<div id="help" class="slds-popover slds-popover--tooltip slds-nubbin--bottom-left" role="tooltip" aria-live="polite" style="position:absolute;top:15px;left:103px;margin-left:-1.5rem;width:20rem;">
  <div class="slds-popover__body slds-text-longform">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facere eligendi reiciendis obcaecati.</p>
  </div>
</div>

The popover tooltip should be positioned with JavaScript.

You can include inline help tooltips for form elements. If your tooltips are available on hover, also make sure that they’re available on keyboard focus. To allow screen readers to access the tooltip, the HTML form field element must have an aria-describedby attribute that points to the tooltip ID of the tooltip.

Inline Level HelpInline Level Helpdev ready

Preview

Code

<a href="javascript:void(0);" class="slds-button">
  <svg aria-hidden="true" class="slds-icon slds-icon-text-error slds-icon--small">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
  </svg>
  <span class="slds-assistive-text">Review the Following Errors</span>
</a>
<button class="slds-button slds-button--neutral" type="button">Cancel</button>
<button class="slds-button slds-button--brand" type="button">Save</button>
<div class="slds-popover slds-nubbin--bottom-left slds-theme--error" role="alert" aria-live="polite" style="position:absolute;top:30px;left:12px;">
  <div class="slds-popover__body slds-text-longform">
    <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</p>
  </div>
</div>

The popover tooltip should be positioned with JavaScript.

When errors are found within a form, the user will be notified with a popover with the page-level errors listed out. The .slds-popover__body must have aria-live="assertive" to notify the user of updated changes.

Edit Dialog For TouchEdit Dialog For TouchprototypeNot Compatible with S1 Mobile

Preview

Code

<div>
  <div aria-hidden="false" role="dialog" class="slds-modal slds-modal--form slds-fade-in-open">
    <div class="slds-modal__container slds-modal--form" role="document" tabindex="0">
      <div class="slds-modal__header">
        <button class="slds-button slds-button--neutral">Cancel</button>
        <button class="slds-button slds-button--neutral slds-button--brand">Save</button>
        <h2 class="slds-text-heading--medium slds-truncate">New Contact</h2>
      </div>
      <div class="slds-modal__content">
        <h3 class="slds-section-title--divider">Section Information</h3>
        <div class="slds-form--stacked slds-p-around--medium slds-m-bottom--x-small">
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="inputNameSample1">Name Suffix</label>
            <div class="slds-form-element__control">
              <input id="inputNameSample1" class="slds-input" type="text" placeholder="Ms." />
            </div>
          </div>
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="inputNameSample2">First Name</label>
            <div class="slds-form-element__control">
              <input id="inputNameSample2" class="slds-input" type="text" placeholder="Esther" />
            </div>
          </div>
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="inputNameSample3">Last Name</label>
            <div class="slds-form-element__control">
              <input id="inputNameSample3" class="slds-input" type="text" placeholder="Lewis" />
            </div>
          </div>
          <div class="slds-m-top--medium large" data-select="multi" data-scope="single" data-typeahead="true">
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="lookup">Lookup</label>
              <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
                <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                </svg>
                <input id="lookup" class="slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" />
              </div>
            </div>
          </div>
          <div class="slds-form-element slds-m-top--medium large">
            <label class="slds-form-element__label" for="select-01">Select</label>
            <div class="slds-select_container">
              <select id="select-01" class="slds-select">
                <option>Select an Option</option>
              </select>
            </div>
          </div>
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="inputSample2">Text Input</label>
            <div class="slds-form-element__control">
              <input id="inputSample2" class="slds-input" type="text" />
            </div>
          </div>
        </div>
        <h3 class="slds-section-title--divider">Section Information</h3>
        <div class="slds-form--stacked slds-p-around--medium slds-m-bottom--x-small">
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="inputSample3">Text Input</label>
            <div class="slds-form-element__control">
              <input id="inputSample3" class="slds-input" type="text" />
            </div>
          </div>
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="inputSample4">Text Input</label>
            <div class="slds-form-element__control">
              <input id="inputSample4" class="slds-input" type="text" />
            </div>
          </div>
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="inputSample5">Text Input</label>
            <div class="slds-form-element__control">
              <input id="inputSample5" class="slds-input" type="text" />
            </div>
          </div>
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="inputSample6">Text Input</label>
            <div class="slds-form-element__control">
              <input id="inputSample6" class="slds-input" type="text" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-backdrop slds-backdrop--open"></div>
</div>

The Edit Dialog is a form that appears as a modal for mobile devices.

Component Overview

For optimum spacing and layout, wrap each element in .slds-form-element. Layout helper classes are available through the following class names, .slds-form--stacked, .slds-form--horizontal and .slds-form--inline.

The read-only state is for form elements that can’t be modified. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text.

Because the read-only field state has no <input>, don’t use a <label> to provide better accessibility for screen readers and keyboard navigators. Instead, use a <span> with the .slds-form-element__label class. Instead of an <input>, use the .slds-form-element__static class inside the .slds-form-element__control wrapper.

Every form field requires an associated, non-empty text <label> element, which is linked to the form field either by wrapping the <label> tag around the field or by giving the <label> a for attribute whose value is that input field’s id. This association ensures that assistive technology users can tell what information to enter where.

Error states alert the user when content in the form is invalid. The .slds-has-error class is placed on the <div class=".slds-form-element">. Place the error message for the user in a <span> with the .slds-form-element__help class. The <input> with the error receives an `aria-describedby` attribute that references the ID attribute of the error message in the <span>. This configuration allows screen readers to properly associate the error message with the field.

When an <input> is required, add the HTML attribute required to it. Additionally, add the .is-required class on the .slds-form-element wrapper.

The native form elements, <input>, <textarea>, <select>, <input type='checkbox'>, and <input type='radio'>, receive validation styling for disabled, checked, and checked disabled, if applicable.

Form Example

Example Form Element Help
Opportunity Owner
Erin Buck
Options
Default

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-form-element
Applied to:

<div>

Outcome:

Initializes form element

Required:

Required

Comments:

--

.slds-form-element__label
Applied to:

<div>

Outcome:

Initializes form element label

Required:

Required

Comments:

--

.slds-form-element__control
Applied to:

<div>

Outcome:

Initializes form element control

Required:

Required

Comments:

Control can contain an <input>, <textarea>, <select>

.slds-form-element__icon
Applied to:

<div>

Outcome:

The icon wrapper for an icon within a form element, this icon is usually used to indicate an error or field level help

Required:

No, optional element or modifier

Comments:

--

.slds-input
Applied to:

<input>

Outcome:

Initializes text input

Required:

Required

Comments:

--

.input--small
Deprecated
Applied to:

.slds-input

Outcome:

Applies styles for a smaller text input

Required:

No, optional element or modifier

Comments:

Removed in version 2.0.0

.slds-input--bare
Applied to:

.slds-input

Outcome:

Removes background and border from text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon
Applied to:

<div> around <input>

Outcome:

Lets text input know how to position .slds-input__icon

Required:

No, optional element or modifier

Comments:

The <div> contains both the <svg> and the <input>

.slds-input__icon
Applied to:

<svg>

Outcome:

Hook for .slds-input-has-icon

Required:

No, optional element or modifier

Comments:

--

.slds-input__icon--left
Applied to:

<svg> or <button>

Outcome:

Hook for .slds-input-has-icon--left-right

Required:

No, optional element or modifier

Comments:

--

.slds-input__icon--right
Applied to:

<svg> or <button>

Outcome:

Hook for .slds-input-has-icon--left-right

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon--left
Applied to:

.slds-input-has-icon

Outcome:

Positions .slds-input__icon to the left of the text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon--right
Applied to:

.slds-input-has-icon

Outcome:

Positions .slds-input__icon to the right of the text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon--left-right
Applied to:

.slds-input-has-icon

Outcome:

Positions .slds-input__icon--left to the left of the text input and .slds-input__icon--right to the right of the text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-fixed-addon
Applied to:

The <div> contains both the .slds-form-element__addon and the <input>

Outcome:

Use on input container to let it know there is fixed text to the left or right of the input

Required:

No, optional element or modifier

Comments:

--

.slds-form-element__addon
Applied to:

any element

Outcome:

Class for fixed text that sits to the left or right of an <input>

Required:

No, optional element or modifier

Comments:

--

.slds-textarea
Applied to:

<textarea>

Outcome:

Initializes textarea

Required:

Required

Comments:

--

.slds-select
Applied to:

<select>

Outcome:

Initializes select

Required:

Required

Comments:

--

.slds-checkbox
Applied to:

<label>

Outcome:

Initializes checkbox

Required:

Required

Comments:

Label wraps the faux checkbox and text, <input> requires [type=checkbox]

.slds-checkbox--faux
Applied to:

<span>

Outcome:

Creates a custom styled checkbox

Required:

Required

Comments:

Apply to <span> inside .slds-checkbox

.slds-checkbox--button-group
Applied to:

<div>

Outcome:

Container for a group of checkbox that look like a button group

Required:

No, optional element or modifier

Comments:

--

.slds-checkbox--button
Applied to:

<label class="slds-button">

Outcome:

Customizes your checkbox to look like a button in a button group

Required:

No, optional element or modifier

Comments:

--

.slds-radio
Applied to:

<label>

Outcome:

Initializes radio button

Required:

Required

Comments:

Label wraps the faux radio and text, <input> requires [type=radio]

.slds-radio--faux
Applied to:

<span>

Outcome:

Creates a custom styled radio button

Required:

Required

Comments:

Apply to <span> inside .slds-radio

.slds-radio--button-group
Applied to:

<div>

Outcome:

Container for a group of radio that look like a button group

Required:

No, optional element or modifier

Comments:

--

.slds-radio--button
Applied to:

<label class="slds-button">

Outcome:

Customizes your radio to look like a button in a button group

Required:

No, optional element or modifier

Comments:

--

.slds-form--horizontal
Applied to:

<form>

Outcome:

Horizontally aligns a single form label and control on the same line

Required:

No, optional element or modifier

Comments:

--

.slds-form--stacked
Applied to:

<form>

Outcome:

Vertically aligns form label and control, provides spacing between form elements

Required:

No, optional element or modifier

Comments:

This is the default

.slds-form--inline
Applied to:

<form>

Outcome:

Horizontally align multiple form elements on the same axis

Required:

No, optional element or modifier

Comments:

--

.slds-form--compound
Applied to:

<form>

Outcome:

Creates a form that consists of multiple form groups

Required:

No, optional element or modifier

Comments:

Groups are placed in fieldsets and small labels are used for inputs

.slds-form-element__row
Applied to:

<div>

Outcome:

Use to create rows of form elements in a compound form

Required:

No, optional element or modifier

Comments:

Wrap form elements in this class

.is-required
Applied to:

.slds-form-element

Outcome:

Applied to .slds-form-element when form element is required

Required:

Required

Comments:

--

.slds-required
Applied to:

<attr>

Outcome:

Class used on required asterick

Required:

Required

Comments:

--

.slds-has-error
Applied to:

.slds-form-element

Outcome:

Applied to .slds-form-element when form element has errors

Required:

Required

Comments:

--